<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
            /**
             *  1、内建对象 String 、Math、Boolean
             *  2、宿主对象 BOM、DOM
             *  3、自建对象
             */
            //创建对象
            var obj = new Object();
            var objNew = {};
            var objNew2 = { age:12 };
            //添加属性
            obj.name = "aaaa";
            obj.age = 12;

            //属性取出
            console.log(obj.name);
            console.log(obj["age"]);

            //属性删除
            delete obj.name;
            console.log(obj);

            //对象属性不遵守变量名称规则
            obj.var = "var";
            obj["123"] = 123;
            console.log(obj);

            var obj2 = new Object();
            obj2["obj"] = obj;
            obj2[obj] = obj;

            console.log(obj2);

            var deObj = {name:"deObj"};
            deObj.deObj = deObj;
            console.log(deObj);
            console.log(deObj.toString());


            var obj3 = {
                name : "obj3",
                age : 18,
                gender : "男",
                sayObj:function(){console.log("name="+this.name+" age = "+this.age+" gender="+this.gender)}
            }; 

            obj3.sayObj();

            function  Person(name,age,gender){
                this.name = name;
                this.age = age;
                this.gender = gender;
                this.sayName = function(){
                    console.log(this.name);
                    console.log(arguments);
                    console.log(arguments.length);
                    console.log(arguments.callee);
                };
            }

            var person = new Person("aaa",12,"male");
            console.log(person);
            Person("aab",12,"female");

            // call() / apply()
            // call() / apply() 方法可以用来调用对象的方法，其作用相同，只是传入参数的方式不同
            // call() / apply() 方法的第一个参数是要调用的对象，之后的参数是传入方法的参数

            person.sayName.apply(obj3);
            console.log("--------------")

            // 遍历对象属性
            for(attrName in person) {
                console.log(attrName);
                console.log(person[attrName]);
            }

            //函数作用域区别：
            // 1、函数作用域：函数内部定义的变量，函数外部无法访问
            // 2、块级作用域：函数外部可以访问
            // 3、闭包：函数内部可以访问函数外部的变量
            // 4、函数参数

            //全局作用域区别：
            // 1、全局作用域在页面打开时创建,关闭时销毁
            // 2、全局作用域有一个全局对象window，它代表是一个浏览器窗口
            // 3、直接编写在script标签中的代码，也会作为window的属性
            /**
             *  创建的变量都会作为window的属性
             *  创建的函数都会作为window的属性
             *  创建的数组、对象、函数等都会作为window的属性
             */

             /* 变量声明提前
              - 使用var声明提前，但不会赋值
              - 使用let声明提前，会赋值undefined
              - 使用const声明提前，会赋值undefined
              - 不使用var、let、const声明提前，会报错
             */
             /* 函数声明提前
              - 使用function声明提前，会在所有代码执行之前执行，可以在函数声明前使用函数
              - 使用函数表达式创建函数，不会提前声明函数，需在var 函数赋值后使用函数
              - 不使用function声明提前，会报错
             */


            console.log("----------------")
             var a = 1;
             //变量的作用域
             function foo (){
                 console.log(a);
                 var a = 2; //局部a会先声明导致，上面的a undefined
                 console.log(a);
             }
             foo();


             function fooo (){
                console.log(a);
                a = 2; //a不会先声明，上面的a 使用全局a,对全局a进行了修改
                console.log(a);
            }
            fooo();
            console.log("a="+a);

            window.onload = function(){
                var box = document.getElementById("box");
                var btn = document.getElementById("btn");
                btn.onclick = function(){
                    box.style.backgroundColor = "blue";
                }
            }



    </script>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="btn">btn</button>
</body>
</html>